<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习之路</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind实例</h1>
    <hr>
    <div id="app">
        <h3>绑定属性</h3>
      <p>
            <img v-bind:src="imageSrc" width="200px">
            <br>
          <img :src="imageSrc" width="200px">
         
      </p>

      <hr>
      <h3>绑定class</h3>
      <p>
            <div class="classA">单纯class用法</div>
            <div v-bind:class="className">单纯绑定用法class</div>
            <div v-bind:class="{classA:isOk}">绑定判断</div>
            <div v-bind:class="[classA1,classC1]">绑定一个数组</div>
            <div :class="isOk?classA1:classC1">三元运算符绑定</div>
            <p>
                <input type="checkbox" id="checkbox" v-model='isOk'>
                <label for="checkbox">{{isOk}}</label>
            </p>
            <div :style="{color:colorName,fontSize:fontSize}">绑定style</div>
            <div :style="styleObject">对象绑定style</div>
          

      </p>

    </div>
    <style >
            .classA{
                color: red;
                font-size:150%;
              
            }
            .classB{
               color: blue;
               font-size: 50%
               
            }
            .classC{
                font-style: italic
            }
            
        </style>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                   imageSrc:'http://jspang.com/wp-content/uploads/2018/01/VUE-timeline.jpg'
                    ,
                    className:'classB',
                    isOk:true,
                    classA1:"classA",
                    classC1:"classC",
                    colorName:"green",
                    fontSize:"100",
                    //对象
                    styleObject:{
                        color:"blue",
                        fontSize:"700"
                    }
                }
            })
        </script>
        
</body>
</html>